<template>
	<view>
		<view class="pad-left-right-24">
			<view class="table font-28">
				<view class="row th">
					<view class="td width1">水表号</view>
					<view class="td width2">充值前金额</view>
					<view class="td width3">充值金额</view>
					<view class="td width4">充值时间</view>
				</view>
				<view class="row color-646464">
					<view class="td width1">2025-01</view>
					<view class="td width2">00001</view>
					<view class="td width3">699</view>
					<view class="td width4">2025-01-10 09:00:00</view>
				</view>
				<view class="row color-646464">
					<view class="td width1">2025-01</view>
					<view class="td width2">00001</view>
					<view class="td width3">699</view>
					<view class="td width4">2025-01-10 09:00:00</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const showDate = ref(false);
	const datetime = ref(Date.now());
	const value = ref("");
</script>

<style scoped>
	.table {
		width: 100%;
		margin-top: 50rpx;
		display: table;
		border-left: 1rpx solid #D5D5D5;
		border-top: 1rpx solid #D5D5D5;
	}

	.row {
		display: table-row;
	}

	.td {
		display: table-cell;
		padding: 10rpx;
		box-sizing: border-box;
		border-right: 1rpx solid #D5D5D5;
		border-bottom: 1rpx solid #D5D5D5;
		vertical-align: middle;
	}

	.th {
		background: #F2FAFD;
	}

	.width1 {
		width: 180rpx;
	}

	.width2 {
		width: 170rpx;
	}

	.width3 {
		width: 170rpx;
	}

	.width4 {
		width: 180rpx;
	}

	.input-box {
		width: 400rpx;
	}
</style>